import {React, useState, useEffect, useRef } from 'react';
// import CircleProgress from './components/CircleProgress';
import { Img } from 'react-image';
import WaterFillCircle from './components/WaterFillCircle';

import './App.css';
import 'tailwindcss';
import { Layout, Menu, Button, Col, Row, Grid, Badge,Space, Flex, Radio,Switch, Tag } from 'antd';
import {
  MenuOutlined,
  ArrowRightOutlined,
  CheckOutlined
} from '@ant-design/icons';
const { Header, Content, Footer } = Layout;
const { useBreakpoint } = Grid;
const menus = [{key: 'contains', label: 'Features', className: 'menu-item', imagePath: '../public/images/menus/Features.svg'}, 
  {key: 'price', label: 'Pricing', className: 'menu-item', imagePath: '../public/images/menus/Pricing.svg'}, 
  {key: 'contact', label: 'Contact', className: 'menu-item', imagePath: '../public/images/menus/Contact.svg'}, 
  {key: 'documentation', label: 'Documentation', className: 'menu-item', imagePath: '../public/images/menus/Documentation.svg'}];

const images = [
  { url: '../public/images/code.svg' },
  { url: '../public/images/cm.svg' },
  { url: '../public/images/ds.svg' },
  { url: '../public/images/mp.svg' }
];
const prices = [
  { info: [
    {title: 'Entry', price: '',unit: 'month', save: 'Save 25%', remark: '$3,588 Billed annually', btnTxt: 'Accelerate', list: [{title: '5 TPS'}, {title: 'Dedicated SWQoS'}, {title: 'Anti-MEV'}, {title: '0.001 SOL Tip'}]},
    {title: 'Intermediate', price: '',unit: 'month', save: 'Save 25%', remark: '$8,988 Billed annually', btnTxt: 'Accelerate', list: [{title: '20 TPS'}, {title: 'Dedicated SWQoS'}, {title: 'Anti-MEV'}, {title: '0.001 SOL Tip'}]},
    {title: 'Advanced', price: '',unit: 'month', save: 'Save 25%', remark: '$17,988 Billed annually', btnTxt: 'Accelerate', list: [{title: '50 TPS'}, {title: 'Dedicated SWQoS'}, {title: 'Anti-MEV'}, {title: '0.001 SOL Tip'}]},
    {title: 'Advanced', price: 'Custom',unit: '', save: '', remark: '', btnTxt: 'Contact Sales', list: [{title: '100+ TPS'}, {title: 'Dedicated SWQoS'}, {title: 'Anti-MEV'}, {title: '0.001 SOL Tip'}]},
] },
  {
    info: [
      {title: 'Trial', price: '$0',unit: '/month', save: '', remark: '', btnTxt: 'Accelerate', list: [{title: '1 TX per 10 sec '}, {title: 'Dedicated SWQoS'}, {title: 'Anti-MEV'}, {title: '0.001 SOL Tip'}]},
      {title: 'Entry', price: '',unit: 'month', save: '', remark: '', btnTxt: 'Accelerate', list: [{title: '5 TPS'}, {title: 'Dedicated SWQoS'}, {title: 'Anti-MEV'}, {title: '0.001 SOL Tip'}]},
      {title: 'Intermediate', price: '',unit: 'month', save: '', remark: '', btnTxt: 'Accelerate', list: [{title: '20 TPS'}, {title: 'Dedicated SWQoS'}, {title: 'Anti-MEV'}, {title: '0.001 SOL Tip'}]},
      {title: 'Advanced', price: '',unit: 'month', save: '', remark: '', btnTxt: 'Accelerate', list: [{title: '50 TPS'}, {title: 'Dedicated SWQoS'}, {title: 'Anti-MEV'}, {title: '0.001 SOL Tip'}]},
    ]
  }
];

const scrollToSection = (id) => {
  console.log(id)
  if(id === 'contains'){
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  } else if(id === 'price') {
    window.scrollTo({
      top: 4500,
      behavior: 'smooth'
    });
  } else if(id === 'contact') {
    window.scrollTo({
      top: 5300,
      behavior: 'smooth'
    });
  } else if(id === 'documentation') {
    window.open('https://doc.flashblock.trade/api/tip-address-usage.html');
  }
  
};

const App = () => {
  const [current, setCurrent] = useState('home');
  const [visible, setVisible] = useState(false);
  const [position] = useState('end');
  const [activeIndex, setActiveIndex] = useState(1);

  const [activePrice, setActivePrice] = useState(2);
  const [currentPrice, setCurrentPrice] = useState(prices[1]);
  const [isGifLoaded, setIsGifLoaded] = useState(false);

  const handleGifLoad = () => {
    setIsGifLoaded(true);
    console.log('GIF 加载完成');
  };
  const handlePrice = (index) => {
    setActivePrice(index);
    setCurrentPrice(prices[index - 1]);
  }

  const [currentProcess, setCurrentProcess] = useState(0);
  const handleSpeed = () => {
    //setCurrentProcess(100);
    setTimeout(()=>{
      setCurrentProcess(100);
    }, 100);
  }
  
  const screens = useBreakpoint();
  const isMobile = !screens.md;
  const onClick = (e) => {
    setCurrent(e.key);
    if (isMobile) setVisible(false);
  };
  const [isLogin, setLogin] = useState(false);
  const divRef = useRef(null);
  useEffect(() => {
        var token = localStorage.getItem('token');
        if(token){
          setLogin(true)
        }
        const observer = new IntersectionObserver(
          (entries) => {
            entries.forEach((entry) => {
              if (entry.isIntersecting) {
                handleSpeed();
              }
            });
          },
          { threshold: 0.1 } // 当 10% 元素可见时触发
        );
    
        if (divRef.current) observer.observe(divRef.current);
    
        return () => {
          if (divRef.current) observer.unobserve(divRef.current);
        };
  }, []); 
  return (
    <Layout>
      <Header
        style={{
          position: 'sticky',
          top: 0,
          zIndex: 2,
          height: '101px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#000000'
        }}
      >
                <img src='../public/images/LOGO1.svg' alt="FlashBlock" />
                
                {isMobile ? (
                  <>
                    <Button 
                      type="text" 
                      icon={<MenuOutlined />} 
                      onClick={() => setVisible(true)}
                      style={{ marginLeft: 'auto' }}
                    />
                    <Menu
                      onClick={onClick}
                      selectedKeys={[current]}
                      mode="inline"
                      items={menus}
                      style={{ 
                        width: 256,
                        position: 'fixed',
                        left: 0,
                        top: 101,
                        height: 'calc(100vh - 64px)',
                        zIndex: 1001,
                        display: visible ? 'block' : 'none'
                      }}
                    />
                    {visible && (
                      <div 
                        style={{
                          position: 'fixed',
                          top: 64,
                          right: 0,
                          bottom: 0,
                          left: 0,
                          backgroundColor: 'rgba(0,0,0,0.5)',
                          zIndex: 1000
                        }}
                        onClick={() => setVisible(false)}
                      />
                    )}
                  </>
                ) : (
                  <>
                    <nav className="hover-nav">
                      {menus.map(item => (
                        <div 
                          key={item.key}
                          className={item.className}
                          onClick={() => scrollToSection(item.key)}
                        >
                          <img 
                            src={item.imagePath} 
                            alt={item.label}
                            className="nav-icon"
                          />
                        </div>
                      ))}
                    </nav>
                    <Button className='SignBtn' type='primary' href='Login' style={{
                        width: '178px',
                        height: '45px',
                        backgroundColor: '#31F045',
                        border: 'none',
                        color: '#000000',
                        marginLeft: '87px',
                        textDecoration: 'none',
                        borderRadius: 45,
                        fontWeight: 500,
                        lineHeight: '45px',
                        display: !isLogin ? 'block' : 'none',
                        fontFamily: 'Inter'
                      }}>Sign In</Button>
                      <Button className='SignBtn' type='primary' href='MemberInfo' style={{
                        width: '178px',
                        height: '45px',
                        backgroundColor: '#31F045',
                        border: 'none',
                        color: '#000000',
                        marginLeft: '87px',
                        textDecoration: 'none',
                        borderRadius: 45,
                        fontWeight: 500,
                        lineHeight: '45px',
                        display: isLogin ? 'block' : 'none',
                        fontFamily: 'Inter'
                      }}>UserCenter</Button>
                  </>
                )}
      </Header>
      <Content style={{
        backgroundColor: '#141E20',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundImage: 'url("../public/images/Group15.svg")',
        backgroundRepeat: 'no-repeat',
        overflowX: 'hidden'
      }}>
        <div id="contains" className='contains'>
          <div className='titleItem'>
            <div className="bigTitle">
              <img src='../public/images/BigTitle.svg' width={757} height={213} />
            </div>
            {/* <div className="secTitle">Solana Transactions</div> */}
            <div className='gitBtn'>
              <Button icon={ <ArrowRightOutlined/> } iconPosition={position} style={{
                  backgroundColor: '#31F045',
                  border: 'none',
                  color: '#000000',
                  fontSize: '16px',
                  fontWeight: 500,
                  width: 230,
                  height: 50,
                  boxShadow: '4px 4px 4px rgba(49, 240, 69, 0.30)',
                  borderRadius: 30,
                  textDecoration: 'none',
                  fontFamily: 'Inter'
                }} href='/Regist'>Get Started</Button>
              </div>
          </div>
          <div className='shandian'>
              <img src='../public/images/lightning21.svg' width={325} height={325} />
          </div>
          <div className='robotItem'>
            <div className='liveBtn'>
              {/* <Button icon={ <ArrowRightOutlined/> } iconPosition={position} style={{
                  backgroundColor: '#1D2C2F',
                  border: 'none',
                  color: '#ffffff',
                  fontSize: '16px',
                  width: 230,
                  height: 50,
                  boxShadow: '4px 4px 4px rgba(0, 0, 0, 0.51)'
                }}>FlashBlock is live</Button> */}
                <img src='../public/images/liveBtn.svg' onClick={()=>{location.href = '/Regist'}} style={{
                  cursor: 'pointer'
                }} />
            </div>
            <div className='robot'>
              <img src='../public/images/robot3.gif' onLoad={handleGifLoad} width={480} height={480} onError='../public/images/robot.svg' />
            </div>
            <div className='robotFloor'>
              <img src='../public/images/robotFloor.png' width={860} height={339} onError='../public/images/robot.svg' />
            </div>
            <div className='robot-bg1'>
                <img src='../public/images/Overlay+Blur.svg' />
            </div>
          </div>
        </div>
        <div className='litTitle'>
          <img src='../public/images/3DText.svg' width={487} height={154} />
        </div>
        <div className='chbox'>
          <div className='box-item'>
            <img src='../public/images/1-34.svg' width={152} height={159} />
            <div className='txt'>
              Global Infrastructure
            </div>
            <div className='txt1'>
              <ul>
                <li>North America & Europe failover systems</li>
                <li>Distributed processing centers</li>
                <li>Continuous availability</li>
              </ul>
            </div>
          </div>
          <div className='box-item'>
            <img src='../public/images/1-42.svg' width={152} height={159} />
            <div className='txt'>
              Largest SWQoS Pool
            </div>
            <div className='txt1'>
              <ul>
                <li>Massive stake weight</li>
                <li>Transaction priority</li>
                <li>Fast confirmations during congestion</li>
              </ul>
            </div>
          </div>
          <div className='box-item'>
            <img src='../public/images/1-52.svg' width={152} height={159} />
            <div className='txt'>
              High TPS Capacity
            </div>
            <div className='txt1'>
              <ul>
                <li>Dynamic optimization</li>
                <li>Automatic adjustment</li>
                <li>Precise scaling</li>
                <li>PMatches needs & budget</li>
              </ul>
            </div>
          </div>
          <div className='box-item'>
            <img src='../public/images/1-13.svg' width={156} height={172} />
            <div className='txt'>
              Competitive Pricing
            </div>
            <div className='txt1'>
              <ul>
                <li>Premium acceleration</li>
                <li>Transparent pricing</li>
                <li>Flexible packages</li>
                <li>High-frequency discounts</li>
              </ul>
            </div>
          </div>
        </div>
        <div className='group9'>
          <div className='t1'>
            Network congestion<br />breakthrough
          </div>
          <div className='t2'>
                <div className='txt'>
                  Dedicated<br />acceleration
                </div>
                <div className='txt'>
                  Fast lane during<br />peak periods
                </div>
          </div>
        </div>
        <div className='litTitle1'>
          Powerful Features
        </div>
        <div className='litTitle2'>
          Built to enhance speed, scalability, and flexibility for every transaction.
        </div>
        <div className='bigBox'>
          <div className='bigBoxItem'>
            <Row gutter={[16, 48]}>
              <Col span={12} justify='center' align='middle'>
                <div className={activeIndex === 1 ? 'itemBox active' : 'itemBox'} onClick={()=>setActiveIndex(1)}>
                <h5>Easy Integration</h5>
                <h6>Transition from your existing services seamlessly and effortlessly with our easy-to-use API, available via HTTP or gRPC.</h6>
                </div>
              </Col>
              <Col span={12} justify='center' align='middle'>
                <div className={activeIndex === 2 ? 'itemBox active' : 'itemBox'} onClick={()=>setActiveIndex(2)}>
                <h5>Cost-per-transaction Model</h5>
                <h6>Simply include our FlashBlock Tip IX with at least 0.001 SOL. Our API will validate you and land your transaction with lightning speed. Higher fees mean higher priority and quicker landing.</h6>
                </div>
              </Col>
            </Row>
            <Row gutter={[16, 48]} style={{
              marginTop: '1rem'
            }}>
              <Col span={12} justify='center' align='middle'>
                <div className={activeIndex === 3 ? 'itemBox active' : 'itemBox'} onClick={()=>setActiveIndex(3)}>
                <h5>Dedicated SWQoS</h5>
                <h6>Every user is allocated a dedicated amount of SWQoS that is not shared
                with others. With our high capacity, we can service thousands of clients with our existing stake, which is the largest in the industry.</h6>
                </div>
              </Col>
              <Col span={12} justify='center' align='middle'>
                <div className={activeIndex === 4 ? 'itemBox active' : 'itemBox'} onClick={()=>setActiveIndex(4)}>
                <h5>MEV-Protect</h5>
                <h6>Avoid getting MEV'd by enabling our anti-frontrun when submitting to our endpoint. All transactions will be guaranteed to be private and will
                be submitted through a priority fast lane.</h6>
                </div>
              </Col>
            </Row>
            <Row gutter={[16, 48]} style={{
              marginTop: '1rem'
            }}>
              <Col span={24} justify='center' align='middle'>
                <div className='itemShow'>
                  <img src={images[activeIndex - 1].url} />
                </div>
              </Col>
            </Row>
          </div>
        </div>
        <div ref={divRef} className='bigSpeedBox'>
            <div className='speedBox'>
              <div className='title'>
                <h1>See the Diffterence Yourself</h1>
                <h6>Compare transaction confirmation speeds from our competitors and experience why<br />FlashBlock leads the pack.</h6>
              </div>
              <div className='box1'>
                <div>
                  {/* <CircleProgress 
                    progress={currentProcess[0]}
                    size={350}
                    strokeWidth={50}
                    progressColor="#31F045"
                    textColor='#ffffff'
                    tickCount={4}
                    trackColor='#000000'
                    showTickNumbers={true}
                    tickWidth={1}
                  /> */}
                  <WaterFillCircle percentage={currentProcess} duration={2500} waveColor={"hsl(126, 61.60%, 42.90%)"} />
                  <div className='title'>
                    <img src='../public/images/logo21.svg' />
                    FlashBlock
                  </div>
                </div>
              </div>
              <div className='box1'>
                <div>
                <WaterFillCircle percentage={currentProcess} duration={5000} waveColor={"hsl(30, 100%, 42.90%)"} />
                  <div className='title'>
                    <img src='../public/images/31.svg' />
                    bloXroute
                  </div>
                </div>
                <div>
                <WaterFillCircle percentage={currentProcess} duration={6000} waveColor={"hsl(20, 64.90%, 48.00%)"} />
                  <div className='title'>
                    <img src='../public/images/Quicknode.svg' />
                    Quicknode
                  </div>
                </div>
                <div>
                <WaterFillCircle percentage={currentProcess} duration={7000} waveColor={"hsl(10, 100%, 61.00%)"} />
                  <div className='title'>
                    <img src='../public/images/Helius1.svg' />
                    Helius
                  </div>
                </div>
                <div>
                <WaterFillCircle percentage={currentProcess} duration={9000} waveColor={"hsl(0, 100%, 61.00%)"} />
                  <div className='title'>
                    <img src='../public/images/G1.svg' />
                    Generic RPC
                  </div>
                </div>
              </div>
              {/* <div className='box1'>
                <Button style={{
                  backgroundColor: '#31F045',
                  color: '#000000',
                  width: 486,
                  height: 45,
                  borderRadius: 40,
                  boxShadow: '4px 4px 4px rgba(22, 116, 32, 0.5)',
                  border: 'none'
                }}
                onClick={()=>handleSpeed()}>Test Transaction Speed</Button>
              </div> */}
            </div>
        </div>
        <div id='price' className='title16'>
          Explore our flexible options - try risk-free and upgrade or downgrade anytime. Your perfect plan awaits!
        </div>
        <div className='priceBtn'>
          <div className='btnList'>
                <div className={activePrice == 1 ? 'pbtn active' : 'pbtn'} onClick={()=>handlePrice(1)}>
                  <div>Annual</div>
                  <div className='secBtn'>Best Value</div>
                </div>
                <div className={activePrice == 2 ? 'pbtn active' : 'pbtn'} onClick={()=>handlePrice(2)}>
                  Monthly
                </div>
          </div>
        </div>
        <div className='priceList'>
          {
            currentPrice.info.map((item, index)=>(
              <div className='priceBox' key={index}>
                <div className='name'>{item.title}</div>
                  <div className='price'>
                    <div>{item.price}<span>{item.unit == '' ? '' : item.unit}</span></div>
                    {item.save == '' ? '' : <div className='saveRate'>{item.save}</div>}
                  </div>
                  {item.remark == '' ? '' : <div className='remark'>{item.remark}</div>}
                  <Button style={{
                    color: '#000000',
                    backgroundColor: '#31F045'
                  }}>{item.btnTxt}</Button>
                  {
                    item.list.map((it,i)=>(
                    <div className='list' key={i}>
                      <Tag icon={<CheckOutlined style={{color: '#31F045'}} />} color="#000000">{it.title}</Tag>
                    </div>
                    ))
                  }
                </div>
            ))}
        </div>
        <div id="contact" className='Contact'>
          <div className='ContactBg'>
              <div>
                <h1>Ready to Supercharge Your Solana Transactions?</h1>
              </div>
              <div>
                Be among the first to experience lightning-fast Solana transactions. No commitment, just pure speed.
              </div>
              <div className='contactBtn'>
                <Button style={{
                  backgroundColor: '#31F045',
                  color: '#000000',
                  borderRadius: 10,
                  width: 230,
                  height: 50,
                  fontSize: 16,
                  border: 'none',
                  textDecoration: 'none'
                }} href='/Regist'>
                  Create a Free Account  
                </Button>
                <Button style={{
                  backgroundColor: '#373737',
                  color: '#ffffff',
                  borderRadius: 10,
                  width: 230,
                  height: 50,
                  fontSize: 16,
                  border: 'none',
                  marginLeft: 20
                }} onClick={()=>{location.href='https://t.me/FlashBlock_trade'}}>
                  Contact Sales
                </Button>
              </div>
              <div className='contactTxt'>
                By signing up, you agree to our Terms & Conditions
              </div>
            </div>
        </div>
      </Content>
      <Footer style={{ 
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#0E0E0E',
        color: '#ffffff ',
        display: 'flex',
       }}>
        <div className='flooter'>
          <div className='logo'>
            <img src='../public/images/LOGO1.svg' />
          </div>
          <div className='menuList'>
            <div className='leftMenu'>
                <div className='list'>
                  <div className='txt'>Company</div>
                  <div className='txt'>Company</div>
                </div>
                <div className='list' style={{marginTop: 31}}>
                  <div className='txt1' onClick={()=>{window.scrollTo({ top: 0, behavior: 'smooth' });}}>Terms of Service</div>
                  <div className='txt1' onClick={()=>{window.open('https://doc.flashblock.trade/api/tip-address-usage.html')}}>Documentation</div>
                </div>
                <div className='list' style={{marginTop: 19}}>
                  <div className='txt1' onClick={()=>{window.scrollTo({ top: 0, behavior: 'smooth' });}}>Privacy Policy</div>
                  <div className='txt1'>Status</div>
                </div>
            </div>
            <div className='rightMenu'>
              <div className='txt'>Social</div>
              <div className='menuIcon'>
                <div className='iconBd'>
                  <img src='../public/images/Vector.svg' onClick={()=>{location.href='https://t.me/FlashBlock_trade'}} />
                </div>
                <div className='iconBd'>
                  <img src='../public/images/Vector(1).svg' onClick={() => {location.href='https://discord.com/invite/5pBsn7Yt'}} />
                </div>
                <div className='iconBd'>
                  <img src='../public/images/x1.svg' onClick={()=>{location.href='https://x.com/FlashBlocktrade'}} />
                </div>
              </div>
            </div>
          </div>
          <div className='webright'>
            <div>© 2025 FlashBlock. All rights reserved.</div>
            <div style={{cursor: 'pointer'}} onClick={()=>{window.scrollTo({ top: 0, behavior: 'smooth' });}}>Terms of Service</div>
          </div>
        </div>
      </Footer>
    </Layout>
  );
};
export default App;